<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="groupId" @tab-change="tabChange">
				<el-tab-pane label="所有" name="0"></el-tab-pane>
				<el-tab-pane label="待付款" name="99"></el-tab-pane>
				<el-tab-pane label="待发货" name="1"></el-tab-pane>
				<el-tab-pane label="待收货" name="2"></el-tab-pane>
				<el-tab-pane label="申请退款" name="5"></el-tab-pane>
                <el-tab-pane label="已退款" name="6"></el-tab-pane>
                <el-tab-pane label="申请退货" name="7"></el-tab-pane>
                <el-tab-pane label="已退货" name="8"></el-tab-pane>
                <el-tab-pane label="交易完成" name="9"></el-tab-pane>
			</el-tabs>
		</el-header>
		<el-header style="height: auto;">
			<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
		</el-header>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-tooltip class="item" effect="dark" content="可通过订单号、用户昵称、收件人姓名、收件人电话模糊检索" placement="top-start">
					<el-input v-model="search.keyword" placeholder="关键字检索" clearable></el-input>
					</el-tooltip>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>

                <el-table-column label="商品信息" prop="goods" width="300">
                    <template #default="scope">
                        <div class="pro" v-for="(item , index) in scope.row.carts" :md="item" v-bind:key="index">
                             <img :src="item.pro_img" class="proimg">
                             <div class="pro_title">
                                   <div style="font-weight: bold;">{{item.pro_title}}</div>
                                   <div>¥{{ item.price }} × {{item.num}}</div>
                             </div>
                        </div>
                    </template>

                </el-table-column>
				<el-table-column label="订单号" prop="ordernum" width="150"></el-table-column>
				<el-table-column label="订单金额" prop="money" width="120">
                    <template #default="scope">
                            <p>订单金额：¥{{ scope.row.shi_money}}</p>
                            <p>实付金额：<text style="color: #ff0000;">¥{{ scope.row.money}}</text></p>
                    </template>
                </el-table-column>

				<el-table-column label="状态" prop="status" width="110">
                    <template #default="scope">
						<el-tag v-if="scope.row.status==1 && scope.row.order_status==0" type="primay">待发货</el-tag>
                        <el-tag v-if="scope.row.status==1 && scope.row.order_status==1" type="primay">待收货</el-tag>
                        <el-tag v-if="scope.row.status==1 && scope.row.order_status==5" type="warning">申请退款</el-tag>
                        <el-tag v-if="scope.row.status==1 && scope.row.order_status==6" type="info">已退款</el-tag>
                        <el-tag v-if="scope.row.status==1 && scope.row.order_status==9" type="success">交易完成</el-tag>
						<el-tag v-if="scope.row.status==0" type="danger">待付款</el-tag>
					</template>
                </el-table-column>
                <el-table-column label="收货地址" prop="address" width="250">
                    <template #default="scope">
                            <p>{{ scope.row.uname }} ， {{ scope.row.phone }}</p>
                            <p>{{ scope.row.address}}</p>
                    </template>

                </el-table-column>
                <el-table-column label="下单人" prop="wx_name" width="120" align="center">
							<template #default="scope">
							        <p><el-image :src="scope.row.avator" class="tx"></el-image></p>
							        <p>{{ scope.row.wx_name}}</p>
							</template>
				</el-table-column>
                <el-table-column label="支付方式" prop="ps" width="120" align="center">微信支付</el-table-column>

				<el-table-column label="下单/支付时间" prop="create_time" width="210" sortable>
                    <template #default="scope">
                            <p>下单时间：{{ scope.row.create_time }}</p>
                            <p>支付时间：{{ scope.row.pay_time }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="用户留言" prop="mess" width="100"></el-table-column>
                <el-table-column label="订单备注" prop="remarks" width="110"></el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="160">
					<template #default="scope">
						<el-button-group>
                            <el-button text type="primary" size="small" @click="tan('ps',scope.row)">支付方式</el-button>
							<el-button text type="primary" size="small" @click='details(scope.row)'>订单详细</el-button>
							<el-button text type="primary" size="small" @click="tan('fahuo',scope.row)">发货</el-button>
                            <el-button text type="primary" size="small" @click="tan('money',scope.row)">修改价格</el-button>
                            <el-button text type="primary" size="small" @click="tan('remarks',scope.row)">备注</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>


        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="600"
            :before-close="handleClose"
          >
            <span>
                 <block v-if="gai_type == 'fahuo'">
                    <el-select v-model="express_company"  filterable style="width: 100%" placeholder="请选择快递公司">
					    <el-option v-for="item in express" :key="item.id" :label="item.name" :value="item.id"/>
				    </el-select>
                    <el-input v-model="gai_value" placeholder="输入快递单号" style="margin-top:20px"></el-input>
                </block>
                <block v-else-if="gai_type=='ps'">
                    <el-radio-group v-model="ps_v">
                        <el-radio v-for="(item,index) in ps" :label="item" :key="index" :md="item" size="small" border>{{ item }}</el-radio>

                    </el-radio-group>
                </block>
                <block v-else>
                    <el-input v-model="gai_value"></el-input>
                </block>
            </span>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogsubmit">
                确定
                </el-button>
            </div>
            </template>
        </el-dialog>

        <orderdetails-dialog v-if="detailsVisible" ref="orderdetailsDialog" @success="handleSaveSuccess" @closed="detailsVisible=false"></orderdetails-dialog>
	</el-container>

</template>

<script>
	import scSelectFilter from '@/components/scSelectFilter'
    import orderdetailsDialog from './order_details'
	export default {
		name: 'listTab',
		components: {
			scSelectFilter,
            orderdetailsDialog
		},
		data() {
			return {
                express_company:'',
                express:[],
                detailsVisible:false,
                dialogVisible:false,
                dialogTitle:"",
                this_data:{},
                gai_type:"",
				groupId: "0",
                gai_value:'',
				filterData: [
					{
						title: "订单类型",
						key: "type",
						multiple: false,
						options: [
							{
								label: "全部",
								value: ""
							},
							{
								label: "普通订单",
								value: "1"
							},
							{
								label: "秒杀订单",
								value: "2"
							},
							{
								label: "拼团订单",
								value: "3"
							},
							{
								label: "砍价订单",
								value: "4"
							}
						]
					}
				],
				list: {
					apiObj: this.$API.system.order.list
				},
                ps:[],
                ps_v:'wxpay',
                os:'',
                types:'',
				search: {
					keyword: ""
				}
			}
		},
		methods: {
            details(row){
                    this.detailsVisible = true
                    this.$nextTick(() => {
					    this.$refs.orderdetailsDialog.open('details').setData(row)
				    })
            },
            dialogsubmit(){
                if(this.gai_value == '' || this.gai_value == null){
                    this.$message.error("请输入内容")
                    return;
                }
                this.orderUpdate()
            },
            async orderUpdate(){
                    if(this.gai_type == 'fahuo'){
                        var res = await this.$API.demo.order.post({'ordernum':this.ordernum,'value':this.gai_value,'act':'fahuo','express_company':this.express_company})
                    }else{
                         res = await this.$API.demo.order.post({'ordernum':this.ordernum,'type':this.gai_type,'value':this.gai_value,'act':'change_column'})
                    }
                    if(res.code == 200){
                        this.$refs.table.reload({'types':this.types,'order_status':this.os})
                        this.dialogVisible = false
                        this.$message.success("操作成功")
                    }else{
                        this.$alert(res.message, "提示", {type: 'error'})
                    }
            },
            async getExpress(){
                    var res = await this.$API.demo.express.get()
                    if(res.code == 200){
                        this.express = res.data.rows
                    }
            },
            async payStyle(){
                var res = await this.$API.demo.paystyle.get()
                if(res.code == 200){
                    this.ps = res.data
                }
            },
            tan(type,data = {}){
                this.this_data = data
                this.dialogVisible = true
                this.ordernum = this.this_data.ordernum
                this.gai_type = type
                switch (type) {
                    case 'ps':
                        this.payStyle()
                        this.dialogTitle = '修改支付方式'
                        break;
                    case 'fahuo':
                        this.getExpress()
                        this.gai_value =  this.this_data.express_no
                        this.express_company = this.this_data.express_company
                        this.dialogTitle = '发货'
                        break;
                    case 'money':
                        this.gai_value = this.this_data.money
                        this.dialogTitle = '修改价格'
                        break;
                    case 'remarks':
                        this.gai_value = this.this_data.remarks
                        this.dialogTitle = '修改备注'
                        break
                    default:
                        break;
                }
            },
			//搜索
			upsearch(){
				this.$refs.table.upData(this.search)
			},
			//标签切换
			tabChange(name){
                this.os = name
				this.$refs.table.reload({'types':this.types,'order_status':this.os})
			},
			filterChange(data){
				console.log(data)
                this.types = data.type
                this.$refs.table.reload({'types':this.types,'order_status':this.os})
				//this.$refs.table.upData(data)
			}
		}
	}
</script>

<style>
.tx{
	width: 30px;
	height: 30px;
	border-radius: 100%;
}
.pro{
    width:100%;
    float: left;
}
.proimg{
    widows:40px;
    height:40px;
    border-radius: 5px;
    float: left;
    margin-right: 5px
}
.protitle{
    width: 80%;
    float: left;
    padding-left: 10px;
}
</style>
